<script setup lang="ts">
import { options } from '@/plugin/index.ts'
import { message } from 'ant-design-vue'
import { ref } from 'vue'
import TsxButton from './TsxButton.tsx'

const utils = ref(Object.keys(options.utils))
const loading = ref(false)
const data = ref([])

utils.value = [...utils.value, 'tsxComponent']

function getDataClick() {
  loading.value = true
  axios.get('https://uapis.cn/api/hotlist?type=bilibili').then((response) => {
    message.success(
      '请求成功',
      10,
    )
    data.value = [response.data.data[0]]
  }).finally(() => {
    loading.value = false
  })
}
</script>

<template>
  <div class="cjs-wrapper">
    <a-typography v-for="util in utils" :key="util" :title="util">
      <div>
        <a-typography-title :level="2">
          {{ util }}
        </a-typography-title>
        <a-typography-paragraph>
          <div v-if="util === 'axios'" class="mb-3px">
            <a-button type="primary" :loading="loading" @click="getDataClick">
              发起请求
            </a-button>
            <div v-if="data?.length !== 0">
              <a-list item-layout="horizontal" :data-source="data">
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta
                      :description="item.desc"
                    >
                      <template #title>
                        <a href="https://www.antdv.com/">{{ item.title }}</a>
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
            </div>
            <a-empty v-else description="暂无数据" />
          </div>
          <TsxButton v-if="util === 'tsxComponent'" />
        </a-typography-paragraph>
      </div>
    </a-typography>
  </div>
</template>

<style scoped lang="scss">

</style>
